<template>
    <div id="echartsDiv">
      <div :id="id" :style="{width: width, height: height}" ref="echartsView"></div>
    </div>
</template>

<script>
import echarts from "echarts"
import report from "../../api/apis/report/report"
// eslint-disable-next-line no-unused-vars
import westeros from "../../components/ECharts/theme/westeros"

export default {
  name: "reportMarketing",
  props: {
    id: {
      type: String,
      default: "myChart"
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "100%"
    }
  },
  data () {
    return {
      chart: null,
      tnameList: [],
      data: []
    }
  },
  mounted () {
    this.loadData()
    this.selfAdaption()
  },
  methods: {
    // echart自适应
    selfAdaption () {
      let that = this
      setTimeout(() => {
        window.onresize = function () {
          if (that.chart) {
            that.chart.resize()
          }
        }
      }, 10)
    },
    initChart () {
      this.chart = echarts.init(document.getElementById(this.id), "westeros")

      let option = {
        // toolbox：这是ECharts中的工具栏。内置有导出图片、数据视图、动态类型切换、数据区域缩放、重置五个工具。
        toolbox: {
          // feature 各工具配置项: dataZoom 数据区域缩放;restore 配置项还原;saveAsImage下载为图片;magicType动态类型切换
          feature: {
            restore: {},
            saveAsImage: {}
          }
        },
        legend: {
          orient: "horizontal", // 布局方式，默认为水平布局，可选为：'horizontal' ¦ 'vertical'
          // 水平安放位置，默认为左侧，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
          x: "center",
          // 垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
          y: "bottom",
          // 重写legend显示样式
          formatter: function (name) {
            // 获取legend显示内容
            let data = option.series[0].data
            let total = 0
            let tarValue = 0
            for (let i = 0, l = data.length; i < l; i++) {
              total += data[i].value
              if (data[i].name === name) {
                tarValue = data[i].value
              }
            }
            let p = (tarValue / total * 100).toFixed(2)
            return name + " " + " " + p + "%"
          },
          data: this.tnameList
        },
        series: [
          {
            type: "pie",
            radius: [0, "70%"],
            center: ["50%", "50%"],
            // label图形上的文本标签 formatter标签内容格式器 可以扩展内容
            label: {formatter: "{b}: {@2012} ({d}%)"},
            color: this.colors,
            data: this.data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ],
        tooltip: {
          show: true,
          trigger: "item",
          showContent: true,
          formatter: "{b} : {c} ({d}%)"
        }
      }
      this.chart.setOption(option)
    },
    loadData () {
      report.fetchGetMarketing().then((res) => {
        let tnameList = []
        let data = []
        for (let marketing of res.data.data) {
          tnameList.push(marketing.tname)
          data.push({"value": marketing.stimessold, "name": marketing.tname})
        }
        this.tnameList = tnameList
        this.data = data
        this.initChart()
      })
    }
  }
}
</script>

<style scoped>
#echartsDiv{
  height: 100%;
}
</style>
